<template>
  <view class="about">
    <ob-navbar title="关于我们" :show-back="true" :prevent-default-back="true" @left-click="backToProfile" />

    <scroll-view class="body" scroll-y>
      <!-- 品牌区 -->
      <view class="hero card">
        <view class="logo">OB</view>
        <view class="brand">
          <text class="name">OceanBridge</text>
          <text class="slogan">让海上购物与补给更简单</text>
        </view>
      </view>

      <!-- 使命愿景 -->
      <view class="section card">
        <view class="title">我们的使命</view>
        <view class="p">为海员与港口提供安全、合规、可靠的跨境电商与供应链服务，
          以更低成本与更高效率连接全球港口与船舶物资。</view>
      </view>

      <!-- 核心能力 -->
      <view class="section card">
        <view class="title">核心能力</view>
        <view class="list">
          <view class="li">多端一体：H5 / 小程序 / App 同一套代码，体验一致</view>
          <view class="li">双购物车：个人购物与船舶集采分离，结算更清晰</view>
          <view class="li">实时沟通：订单动态与客服消息即时送达</view>
          <view class="li">实名认证与风控：KYC 审核、敏感操作二次校验</view>
          <view class="li">弱网可用：断点续传与结果幂等，海上网络也能稳定使用</view>
        </view>
      </view>

      <!-- 合规与安全 -->
      <view class="section card">
        <view class="title">合规与安全</view>
        <view class="list">
          <view class="li">数据安全：全站 HTTPS 传输，敏感信息加密存储</view>
          <view class="li">用户隐私：最小化采集、目的限定、可撤回与导出</view>
          <view class="li">风控体系：登录与交易行为监测，异常即时告警</view>
        </view>
        <view class="links">
          <text class="link" @click="openAgreement('user')">用户协议</text>
          <text class="dot">·</text>
          <text class="link" @click="openAgreement('privacy')">隐私政策</text>
        </view>
      </view>

      <!-- 联系我们 -->
      <view class="section card">
        <view class="title">联系我们</view>
        <view class="p">商务合作与技术支持：</view>
        <view class="email" @click="copyEmail">dev@oceanbridge.com</view>
        <view class="tip">点击可复制邮箱地址</view>
      </view>

      <!-- 应用信息 -->
      <view class="section card">
        <view class="title">应用信息</view>
        <view class="meta">
          <text>版本：v1.0.0</text>
          <text class="sep">|</text>
          <text>版权所有 © 2025 OceanBridge Team</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
// 跳转到内置协议页面
const openAgreement = (type) => {
  const t = type === 'privacy' ? 'privacy' : 'user'
  uni.navigateTo({ url: `/pages/common/agreement?type=${t}` })
}

// 复制邮箱
const copyEmail = () => {
  uni.setClipboardData({
    data: 'dev@oceanbridge.com',
    success: () => uni.showToast({ title: '邮箱已复制', icon: 'none' })
  })
}
// 返回到“我的”tab
const backToProfile = () => {
  uni.switchTab({ url: '/pages/profile/index' })
}
</script>

<style scoped>
.about{ min-height:100vh; background:#F5F5F5 }
.body{ height: calc(100vh - 44px) }

.card{ background:#fff; border-radius:12px; padding:16px; margin:12px; box-shadow:0 0 0 1px #eee inset }
.hero{ display:flex; align-items:center; gap:12px }
.logo{ width:48px; height:48px; border-radius:12px; background:linear-gradient(135deg,#0079FE,#00C8FF); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900 }
.brand .name{ font-weight:700; font-size:16px }
.brand .slogan{ color:#666; font-size:12px; margin-top:4px }

.section .title{ font-weight:700; margin-bottom:8px }
.p{ color:#444; line-height:1.6 }
.list{ margin-top:2px }
.list .li{ position:relative; padding-left:14px; margin:6px 0; color:#333 }
.list .li::before{ content:'•'; position:absolute; left:0; top:0; color:#0079FE }

.links{ margin-top:8px }
.link{ color:#0079FE }
.dot{ margin:0 6px; color:#bbb }

.email{ color:#0079FE; font-weight:700; margin-top:6px }
.tip{ color:#999; font-size:12px; margin-top:2px }

.meta{ color:#666; display:flex; gap:8px; flex-wrap:wrap }
.sep{ color:#ccc; margin:0 4px }
</style>

